<template>
	
	 <view>
	    <!-- 右上角的规则按钮 -->
	    <view class="rule-button" @click="showModal">规则</view>
	    
	    <!-- 弹窗 -->
	    <view v-if="isModalVisible" class="modal-overlay" @click="hideModal">
	      <view class="modal" @click.stop>
	        <text class="modal-content">本软件是由Dmitai成员的作业，现软件处于试行状态，由于用户的不确定性，所以没有做太多的验证功能，但是后期会做，不仅仅只有虚拟产品，现在注册就是老用户。<br><p></p>老用户1元区直接免费，后期会给你提升用户等级，如果等级为3，9.9及以下的免费，如果等级4，全场免费</text>
	        <button class="modal-close" @click="hideModal">关闭</button>
	      </view>
	    </view>
	  </view>
	
  <view class="container">
    <!-- 判断用户是否已登录 -->
    <view v-if="isLoggedIn">
      <!-- 登录后的欢迎信息页面 -->
      <view class="welcome-page">
        <text class="welcome-message">欢迎: {{ username }} <p></p></text>
        <text class="welcome-message">用户等级: {{ leve }} </text><br>
		<text class="welcome-message">余额: ￥{{ balance }} </text><br>
        <button @click="logout" class="logout-btn">退出登录</button>
      </view>
    </view>
    <view v-else>
      <!-- 登录和注册表单 -->
      <view v-if="isLogin" class="form">
        <view class="input-group">
			

          <text class="label">用户名</text>
          <input 
            v-model="username" 
            class="input" 
            type="text" 
            placeholder="请输入用户名" 
          />
        </view>
        
        <view class="input-group">
          <text class="label">密码</text>
          <input 
            v-model="password" 
            class="input" 
            type="password" 
            placeholder="请输入密码" 
          />
        </view>

        <button class="login-btn" @click="handleLogin">登录</button>
        
        <view v-if="errorMessage" class="error-message">
          <text>{{ errorMessage }}</text>
        </view>

        <view class="switch-auth">
          <text @click="toggleAuth">没有账号? 注册</text>
        </view>
      </view>

      <!-- 注册表单 -->
      <view v-else class="form">
        <view class="input-group">
          <text class="label">用户名</text>
          <input 
            v-model="username" 
            class="input" 
            type="text" 
            placeholder="请输入用户名" 
          />
        </view>
        
        <view class="input-group">
          <text class="label">密码</text>
          <input 
            v-model="password" 
            class="input" 
            type="password" 
            placeholder="请输入密码" 
          />
        </view>

        <button class="register-btn" @click="handleRegister">注册</button>

        <view v-if="errorMessage" class="error-message">
          <text>{{ errorMessage }}</text>
        </view>

        <view class="switch-auth">
          <text @click="toggleAuth">已有账号? 登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isModalVisible: false, // 控制弹窗显示与隐藏
      errorMessage: '',  // 错误信息
      username: '',  // 用户名
      password: '',  // 密码
      isLogin: true,  // 是否显示登录表单
      isLoggedIn: false,  // 用户是否登录
      leve: '',  // 用户等级
      banStatus: false,  // 用户封号状态
      banMessage: '',  // 用户封号描述
      balance: 0,  // 用户余额
      loginInterval: null,  // 定时器
    };
  },
  
  computed: {
    // 获取本地存储的用户名
    storedUsername() {
      return uni.getStorageSync('username');
    }
  },
  
  watch: {
    // 监听 storedUsername 的变化
    storedUsername(newVal) {
      this.isLoggedIn = !!newVal;
      this.username = newVal || '';  // 如果用户已登录，则更新用户名
    }
  },
  
  methods: {
    // 显示弹窗
    showModal() {
      this.isModalVisible = true;
    },
    // 隐藏弹窗
    hideModal() {
      this.isModalVisible = false;
    },

    // 登录逻辑
    handleLogin() {
      this.errorMessage = '';  // 清空错误信息
    
      // 验证输入是否为空
      if (!this.username || !this.password) {
        this.errorMessage = '用户名和密码不能为空';
        return;
      }
    
      // 请求后端的登录接口
      uni.request({
        url: 'https://api.dmitai.vip/login',  // 后端登录接口地址
        method: 'POST',
        data: {
          username: this.username,
          password: this.password,
        },
        success: (res) => {
          if (res.data.success) {
            // 登录成功，保存 token 和用户名
            uni.setStorageSync('token', res.data.token);
            uni.setStorageSync('username', this.username);  // 保存用户名
            this.username = this.username;  // 更新用户名
            this.isLoggedIn = true;
    
            // 获取用户等级信息
            this.fetchUserLevel();
    
            // 获取用户封号状态
            this.fetchUserStatus();
    
            // 获取用户余额
            this.fetchUserBalance();
    
            // 清空错误信息（如果之前有）
            this.errorMessage = '';
    
            // 显示登录成功的提示框
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 2000,  // 提示框显示时间
            });
    
          } else {
            this.errorMessage = res.data.message || '登录失败';
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          this.errorMessage = '请求失败，请稍后重试';
        }
      });
    },

    // 获取用户等级
    fetchUserLevel() {
      uni.request({
        url: 'https://api.dmitai.vip/getUserLevel',  // 获取用户等级接口地址
        method: 'GET',
        data: {
          username: this.username,
        },
        success: (res) => {
          if (res.data.success) {
            this.leve = res.data.level;
          } else {
            this.leve = '未知'; // 如果没有返回等级，设置为未知
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          this.leve = '未知';  // 获取失败时，默认显示未知
        }
      });
    },

    // 获取用户封号状态和描述
    fetchUserStatus() {
      uni.request({
        url: 'https://api.dmitai.vip/getUserStatus',  // 获取用户封号状态接口
        method: 'GET',
        data: {
          username: this.username,
        },
        success: (res) => {
          if (res.data.success) {
            if (res.data.isBanned) {
              // 用户被封号，更新封号状态和描述
              this.banStatus = true;
              this.banMessage = res.data.describews || '你已被封号，请联系管理员';
              this.errorMessage = this.banMessage; // 显示封号原因
              
              // 自动退出账号
              this.logout();

              // 弹出封号规则提示框
              uni.showModal({
                title: '封号通知',
                content: this.banMessage, // 显示封号原因或规则
                showCancel: false,
                confirmText: '知道了',
                success: () => {
                  // 用户点击知道了后处理逻辑，可以跳转到其他页面或直接退出
                  uni.redirectTo({
                    url: '/pages/login/login'  // 跳转到登录页面
                  });
                }
              });
            } else {
              // 用户未封号
              this.banStatus = false;
              this.banMessage = '';
              this.errorMessage = '';
            }
          } else {
            this.errorMessage = res.data.message || '获取用户封号状态失败';
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          this.errorMessage = '请求失败，请稍后重试';
        }
      });
    },

    // 获取用户余额
    fetchUserBalance() {
      uni.request({
        url: 'https://api.dmitai.vip/getUserBalance',  // 获取用户余额接口地址
        method: 'GET',
        data: {
          username: this.username,
        },
        success: (res) => {
          if (res.data.success) {
            this.balance = res.data.balance || 0; // 获取余额并更新
          } else {
            this.balance = 0; // 默认余额为 0
            this.errorMessage = res.data.message || '获取用户余额失败';
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          this.errorMessage = '请求失败，请稍后重试';
        }
      });
    },

    // 注册逻辑
    handleRegister() {
      this.errorMessage = '';  // 清空错误信息

      if (!this.username || !this.password) {
        this.errorMessage = '用户名和密码不能为空';
        return;
      }

      // 请求后端的注册接口
      uni.request({
        url: 'https://api.dmitai.vip/register',  // 后端注册接口地址
        method: 'POST',
        data: {
          username: this.username,
          password: this.password,
        },
        success: (res) => {
          if (res.data.success) {
            uni.showToast({
              title: '注册成功',
              icon: 'success',
            });
            this.toggleAuth();  // 切换到登录表单
          } else {
            this.errorMessage = res.data.message || '注册失败';
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          this.errorMessage = '请求失败，请稍后重试';
        }
      });
    },

    // 切换登录和注册表单
    toggleAuth() {
      this.isLogin = !this.isLogin;
      this.username = '';  // 清空输入框
      this.password = '';
      this.errorMessage = '';
    },

    // 注销逻辑
    logout() {
      // 清空本地存储并跳转到登录页面
      uni.removeStorageSync('token');
      uni.removeStorageSync('username');
      uni.showToast({
        title: '退出成功',
        icon: 'success',
      });
      this.isLoggedIn = false;
    },

    // 每10秒检查一次是否登录并获取用户等级和封号状态
    checkLoginStatus() {
      this.loginInterval = setInterval(() => {
        const storedUsername = uni.getStorageSync('username');
        this.isLoggedIn = !!storedUsername;
        this.username = storedUsername || '';  // 更新用户名
        if (this.isLoggedIn) {
          this.fetchUserLevel();  // 获取用户等级
          this.fetchUserStatus();  // 获取用户封号状态
          this.fetchUserBalance();  // 获取用户余额
        }
      }, 10000);  // 每10秒执行一次
    }
  },

  mounted() {
    // 页面加载时从本地存储读取用户名
    const storedUsername = uni.getStorageSync('username');
    this.username = storedUsername || '';  // 更新用户名
    this.isLoggedIn = !!storedUsername;  // 根据是否有用户名来判断是否登录

    if (this.isLoggedIn) {
      // 如果已登录，获取用户等级信息
      this.fetchUserLevel();
      this.fetchUserStatus();  // 获取用户封号状态
      this.fetchUserBalance();  // 获取用户余额
    }

    // 启动定时器检查登录状态
    this.checkLoginStatus();
  },

  beforeDestroy() {
    // 在页面销毁时清理定时器
    if (this.loginInterval) {
      clearInterval(this.loginInterval);
    }
  }
}
</script>





<style scoped>
	
	/* 右上角的规则按钮 */
	.rule-button {
	  position: fixed;
	  top: 50px;
	  right: 20px;
	  background-color: rgba(0, 123, 255, 0.8);
	  color: white;
	  padding: 10px 20px;
	  border-radius: 25px;
	  font-size: 14px;
	  cursor: pointer;
	  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	  transition: background-color 0.3s ease;
	}
	
	.rule-button:hover {
	  background-color: rgba(0, 123, 255, 1);
	}
	
	/* 弹窗遮罩层 */
	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	}
	
	/* 弹窗样式 */
	.modal {
	  background: rgba(255, 255, 255, 0.8);
	  padding: 20px;
	  border-radius: 12px;
	  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	  max-width: 80%;
	  width: 300px;
	  text-align: center;
	  backdrop-filter: blur(10px);  /* 胶片玻璃效果 */
	  animation: slideIn 0.4s ease-out;
	}
	
	/* 弹窗内容文本 */
	.modal-content {
	  font-size: 16px;
	  color: #333;
	  margin-bottom: 15px;
	  line-height: 1.5;
	}
	
	/* 弹窗关闭按钮 */
	.modal-close {
	  background-color: #ff4081;
	  color: white;
	  border: none;
	  padding: 8px 16px;
	  border-radius: 25px;
	  font-size: 14px;
	  cursor: pointer;
	  transition: background-color 0.3s ease;
	}
	
	.modal-close:hover {
	  background-color: #f50057;
	}
	
	/* 弹窗出现的动画 */
	@keyframes slideIn {
	  from {
	    transform: scale(0.8);
	    opacity: 0;
	  }
	  to {
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	
	
/* 样式模仿苹果UI */
/* 主要容器 */
   .container {
            background-color: #f2f2f7; /* 苹果常见的柔和灰色背景 */
            min-height: 100vh; /* 最小高度 100vh */
            display: flex;
            flex-direction: column;
            align-items: center; /* 水平居中 */
            justify-content: center; /* 垂直居中 */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
            padding: 20px;
            box-sizing: border-box;
            margin: 0;
            overflow: auto;
        }


/* 欢迎页面 */
.welcome-page {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 350px;
}

/* 欢迎信息 */
.welcome-message {
  font-size: 17px;
  color: #1c1c1e; /* 深色文本 */
  margin: 10px 0;
  font-weight: 500;
}

/* 按钮样式 */
button {
  background-color: #007aff; /* 苹果的蓝色 */
  color: white;
  border: none;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0051c3; /* 按钮悬停时颜色 */
}

/* 输入框 */
.input {
  width: 90%;
  padding: 12px 16px;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid #d1d1d6; /* 浅灰色边框 */
  background-color: #f7f7f8;
  color: #1c1c1e;
  font-size: 16px;
}

.input-group {
  margin-bottom: 20px;
}

/* 标签 */
.label {
  font-size: 15px;
  color: #3a3a3c; /* 更深的灰色 */
  margin-bottom: 6px;
}

/* 错误信息 */
.error-message {
  color: #ff3b30; /* 苹果红色 */
  font-size: 14px;
  margin-top: 10px;
}

/* 切换登录和注册 */
.switch-auth {
  font-size: 15px;
  color: #007aff; /* 蓝色链接风格 */
  cursor: pointer;
  text-decoration: none;
  margin-top: 20px;
}

.switch-auth:hover {
  text-decoration: underline;
}

/* 表单样式 */
.form {
  background-color: #ffffff;
  padding: 25px;
  width: 90%;
  max-width: 350px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form .input-group {
  margin-bottom: 25px;
}

.login-btn, .register-btn {
  background-color: #007aff; /* 苹果蓝 */
  color: white;
  border: none;
  padding: 14px 28px;
  font-size: 16px;
  border-radius: 12px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-btn:hover, .register-btn:hover {
  background-color: #0051c3; /* 按钮悬停时颜色 */
}
</style>
